<template>
    <div class="wrapper detail">
        <mt-header title="消息详情" mtClass="no-bg"/>
        <div class="content">
            <div class="news-title">{{info.title}}</div>
            <div class="news-info">{{info.createDate | filterTime}}</div>
            <div class="news-text">{{info.content}}</div>
        </div>
    </div>
</template>

<script>
import mtHeader from "@/components/Header"
import { UpdateUserMessageStatus } from '@/api/api'
import { parseTime } from '@/utils/index'
export default {
    data() {
        return {
            info:{
                title: '',
                content: '',
                createDate: ''
            }
        }
    },
    components:{
        mtHeader
    },
    filters:{
        filterTime:function(val){
            return parseTime(val)
        }
    },
    mounted(){
        this.info.title = this.$route.query.title;
        this.info.content = this.$route.query.content;
        this.info.createDate = this.$route.query.createDate;
        if( this.$route.query.state == '1' ){
            //未读 --标记为已读
            this.updateState();
        }
    },
    methods:{
        updateState(){
            UpdateUserMessageStatus({
                "id": this.$route.query.id,
                "state": '0',
                "type": this.$route.query.type
            }).then(res => {
                if( res.code == 200 ){
                    console.log(res);
                }
            })
        }
    }
}
</script>

<style lang="stylus" scoped>
 .wrapper{
    height:100%;
    padding-top:70px;
    .content{
        padding:0 15px;
        .news-title{
            font-size:20px;
            color:#323232;
            line-height:27px;
            margin-bottom:15px;
        }
        .news-info{
            font-size:14px;
            color:#999;
            padding-bottom:10px;
            border-bottom:1px solid #F4F5FA;
        }
        .news-text{
            padding:10px 0;
            font-size:16px;
            color:#666666;
            line-height: 25px;
            padding-bottom:20px;
        }
    }
}
</style>